@ant-checkbox: ant-checkbox;

.tint {
  .@{ant-checkbox}-inner {
    border: 1px solid #cccccc;
  }
  .@{ant-checkbox}-disabled {
    .ant-checkbox-inner {
      background-color: rgba(204, 204, 204, 0.4);
      border-color: #ededed !important;
    }

    &.ant-checkbox-checked {
      .ant-checkbox-inner {
        background-color: #d1d1d1;
        border-color: #d1d1d1 !important;
        &::after {
          border-color: #ffffff;
        }
      }
    }
  }
  .@{ant-checkbox}-checked .@{ant-checkbox}-inner {
    background-color: var(--primary);
    border: 1px solid var(--primary);
  }
}
.dark {
  .@{ant-checkbox}-inner {
    border: 1px solid #cbcbcb;
  }
  .@{ant-checkbox}-disabled {
    .ant-checkbox-inner {
      background: #eeeeee !important;
      border-color: #eeeeee !important;
      opacity: 0.3;
    }

    &.ant-checkbox-checked {
      .ant-checkbox-inner {
        background-color: #eeeeee;
        border-color: #eeeeee !important;
        opacity: 0.2;
        &::after {
          border-color: #626262;
        }
      }
    }
  }
  .@{ant-checkbox}-checked .@{ant-checkbox}-inner {
    background-color: var(--primary);
    border: 1px solid var(--primary);
  }
}

.@{ant-checkbox}-inner {
  width: 14px;
  height: 14px;
  &::after {
    left: 2px;
    top: 5px;
  }
}
